import React from 'react';
import { type SvgIconProps } from '@mui/material/SvgIcon';
import AppSvgIcon from './AppSvgIcon';

const AlertAnomalyIcon: React.FC<SvgIconProps> = ({ sx, fill, ...props }) => (
  <AppSvgIcon sx={sx} viewBox='0 0 24 24' {...props}>
    <svg
      width='24'
      height='24'
      viewBox='0 0 24 24'
      fill='none'
      xmlns='http://www.w3.org/2000/svg'
    >
      <path
        fillRule='evenodd'
        clipRule='evenodd'
        d='M4 0C2.89543 0 2 0.89543 2 2V22C2 23.1046 2.89543 24 4 24H20C21.1046 24 22 23.1046 22 22V7.37214C22 6.816 21.7684 6.28498 21.3609 5.90655L15.5755 0.534413C15.2056 0.190906 14.7194 0 14.2146 0H4ZM12.0188 15.0333C12.5666 15.0333 12.9898 14.5862 13.1115 14.0521C13.1367 13.9415 13.1665 13.8371 13.2008 13.7387C13.3239 13.3791 13.5525 13.0325 13.8867 12.6991C14.2795 12.3002 14.6371 11.9177 14.9595 11.5516C15.2819 11.1789 15.5399 10.78 15.7334 10.355C15.9268 9.92348 16.0235 9.42329 16.0235 8.85444C16.0235 8.02405 15.8623 7.32116 15.5399 6.74578C15.2233 6.17039 14.7631 5.73558 14.1593 5.44135C13.5613 5.14712 12.8432 5 12.0049 5C11.2486 5 10.5627 5.14385 9.94714 5.43154C9.33745 5.7127 8.85087 6.15404 8.4874 6.75558C8.26519 7.11935 8.10761 7.54666 8.01468 8.03751C7.91057 8.58739 8.37516 9.05059 8.9348 9.05059H9.70646C10.2471 9.05059 10.6341 8.58109 10.8793 8.09924C11.0024 7.85732 11.1636 7.68078 11.3629 7.56963C11.5622 7.45193 11.7762 7.39309 12.0049 7.39309C12.2804 7.39309 12.509 7.4552 12.6908 7.57943C12.8784 7.69713 13.0191 7.87367 13.1129 8.10905C13.2125 8.3379 13.2623 8.63213 13.2623 8.99175C13.2623 9.29252 13.2066 9.5704 13.0953 9.8254C12.9839 10.0804 12.8256 10.3289 12.6204 10.5708C12.4152 10.8062 12.1749 11.0579 11.8993 11.326C11.5828 11.6464 11.3307 11.9831 11.1431 12.3362C10.9555 12.6827 10.8206 13.075 10.7386 13.5131C10.7098 13.6762 10.6864 13.8501 10.6685 14.0347C10.6151 14.5844 11.072 15.0333 11.6243 15.0333H12.0188ZM10.7298 16.9262C10.4484 17.227 10.3077 17.5964 10.3077 18.0345C10.3077 18.4791 10.4484 18.8518 10.7298 19.1526C11.017 19.4468 11.3893 19.5939 11.8466 19.5939C12.3038 19.5939 12.6732 19.4468 12.9546 19.1526C13.236 18.8518 13.3767 18.4791 13.3767 18.0345C13.3767 17.5964 13.236 17.227 12.9546 16.9262C12.6732 16.6254 12.3038 16.475 11.8466 16.475C11.3893 16.475 11.017 16.6254 10.7298 16.9262Z'
        fill={fill || '#A8B0BD'}
      />
    </svg>
  </AppSvgIcon>
);

export default AlertAnomalyIcon;
